<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>供应商管理</title>
<meta name="decorator" content="default" />
<script type="text/javascript">
$(function(){
	var o = 0;
	$("#addEnclosure").click(function() {
		newRow = '<tr>'
					+'<td><input name="fileName" type="file" style="width: 330px" /></td>'
					+'<td></td>'
					+'<td><a href="javascript:" class="deleteRow" ><i class="icon-remove"></i></a></td>'
					+'</tr>';
		$("#tbodys").append(newRow);
	});
});
</script>

</head>
<body>

	<div class="container" style="width: 100%;">
		<div style="margin: 20px; border: 1px solid #c8d1d5;">
			<div style="padding: 10px; background-color: #f4f4f4; border-bottom: 1px solid #c8d1d5;">
				<h4>
					<i class="icon-globe"></i>供应商${not empty supplier.id?'修改':'添加'}
				</h4>
			</div>
			<div style="margin: 17px;">
				<form:form modelAttribute="supplier" action="" method="post">
					<div
						style="border: 1px solid #c8d1d5; padding-top: 10px; margin-bottom: 20px;">
						<div class="row-fluid ">
						    <div class="span2" style="margin-left: 10px;">
								<label class="control-label">供应商编号</label>
								<div>
									<form:input path="codeNum" htmlEscape="false" maxlength="100"
										id="codeNum" class="span12"  placeholder="自动生成，可不填"
										disabled="true"/>
								</div>
							</div>
							<div class="span2" >
								<label class="control-label">供应商名称</label>
								<div>
									<form:input path="name" htmlEscape="false" maxlength="100"
										id="name" class="span12" />
									<form:input path="id" id="supplierId" type="hidden" />
								</div>
							</div>
							<div class="span2">
								<label class="control-label">供应商类型</label>
								<div>
									<form:select path="supplierTypeCodeNum" class="span12"
										id="supplierTypeCodeNum">
										<form:options items="${fns:getSupplierTypeList()}"
											itemLabel="name" itemValue="codeNum" htmlEscape="false" />
									</form:select>
								</div>
							</div>
							<div class="span2">
								<label class="control-label">联系电话</label>
								<div>
									<form:input path="phone" htmlEscape="false" maxlength="64"
										id="phone" class="span12" />
								</div>
							</div>
						</div>
						<div class="row-fluid ">
							<div class="span2" style="margin-left: 10px;">
								<label class="control-label">传真</label>
								<div>
									<form:input path="fax" htmlEscape="false" maxlength="64"
										id="fax" class="span12" />
								</div>
							</div>
							<div class="span2">
								<label class="control-label">邮箱</label>
								<div>
									<form:input path="email" htmlEscape="false" maxlength="64"
										id="email" class="span12" />
								</div>
							</div>
							<div class="span2">
								<label class="control-label">地址</label>
								<div>
									<form:input path="address" htmlEscape="false" maxlength="64"
										id="address" class="span12" />
								</div>
							</div>
							<div class="span2" >
								<label class="control-label">网址</label>
								<div>
									<form:input path="website" htmlEscape="false" maxlength="64"
										id="website" class="span12" />
								</div>
							</div>
						</div>	
					</div>
				</form:form>
				<table id="contentTable" class="table table-hover table-bordered">
					<thead>
						<tr>
							<th>联系人编号</th>
							<th>联系人</th>
							<th>电话</th>
							<th>邮箱</th>
							<th>备注</th>
							<shiro:hasPermission name="pro:supplier:edit">
								<th>操作</th>
							</shiro:hasPermission>
						</tr>
					</thead>
					<tbody id="tbody">
						<c:forEach items="${list}" var="info">
							<tr>
								<td style="display: none;"><input type="hidden"
									value="${info.id}"></td>
								<td>${info.codeNum }</td>
								<td>${info.name }</td>
								<td>${info.phone}</td>
								<td>${info.email}</td>
								<td>${info.remarks}</td>
								<td><shiro:hasPermission name="pro:supplier:edit">
										<a href="javascript:" onclick="update(this)"><i
											class="icon-edit"></i></a>&nbsp;
									<a href="javascript:" class="deleteRow"><i
											class="icon-remove"></i></a>
									</shiro:hasPermission></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="form-actions formBtn">
					<button type="button" class="btn btn-primary" onclick="add()">
						<i class="icon-plus"></i>&nbsp;添加联系人
					</button>
				</div>
				<sys:message content="${message}" />
			<form id="uploadForm" action="${ctx}/pro/supplier/save" method="post" 
			enctype="multipart/form-data" class="form-search" onsubmit="loading('正在上传，请稍等...');">
				<table class="table table-hover table-bordered">
					<thead>
						<th>附件名称</th>
						<th>添加时间</th>
						<th>操作</th>
					</thead>
					<tbody id="tbodys">
					<c:forEach items="${enclosureList}" var="info">
						<tr>
							<td style="display: none;"><input type="hidden" value="${info.id}"></td>
							<td>${info.name }</td>
							<td><fmt:formatDate value="${info.createDate }" pattern="yyyy-MM-dd HH:mm:ss" /></td>
							<td>
								<a href="${ctx}/pro/supplier/downloadEnclosure?id=${info.id}"><i class="icon-download"></i></a>
								<a href="${ctx}/pro/supplier/deleteEnclosure?id=${info.id}&foreignKey=${info.foreignKey}" 
									onclick="return confirmx('确认要删除该附件吗？', this.href)">
								<i class="icon-remove"></i></a>
							</td>
						</tr>
					</c:forEach>
					</tbody>
				</table>
				<div class="form-actions formBtn">
					<a class="btn btn-info" href="javascript:void(0)" id="addEnclosure">
					<i class="icon-upload"></i>&nbsp;添加附件</a>
				</div>
				<div>
					<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">备注</label>
					<div>
						<textarea rows="5" class="input-xxlarge" id="supplierRemarks">${supplier.remarks }</textarea>
					</div>
				</div>
				<div class="form-actions formBtn">
					<button type="button" class="btn btn-primary" onclick="save()">
						<i class="icon-ok"></i>&nbsp;保存
					</button>
					<!-- <button type="button" class="btn btn-primary"
						onclick="history.go(-1)">返 回</button> -->
					<a class="btn btn-primary" href="${ctx}/pro/supplier/list">返 回</a>
						
				</div>
				<input type="hidden" name="supplier" >
				<input type="hidden" name="contacts" >
				<input type="hidden" name="ids">
				
				
				
			</form>
			
			</div>
		</div>
	</div>
	<script type="text/javascript">
		//添加联系人
		function add() {
			var html = '<div style="margin-top: 10px;">'
					+'<label class="control-label" style="width: 130px; text-align: right;">联系人编号：</label>'
					+ '<input type="text" id="contactsCodeNum" readonly="true" placeholder="自动生成，可不填"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人：</label>'
					+ '<input type="text" id="contactsName" placeholder="必填" />'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">电话：</label>'
					+ '<input type="text" id="contactsPhone" />'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">邮箱：</label>'
					+ '<input type="text" id="contactsEmail" />'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">备注：</label>'
					+ '<textarea rows="2" cols="30" id="contactsRemarks"></textarea></div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'选择' : true,
					'关闭' : false
				},
				submit : function(v, h, f) {
					if (v == false) {
						return true;
					} else {
						//判断是否选择了合同，然后赋值给文本框
						if (h.find("#contactsName").val() == '') {
							$.jBox.tip("请输入联系人", "warn");
							return false;
						}
						//获取值添加到表格中
						var newRow = '<tr>'
								+ '<td style="display: none;"><input type="hidden" value=""></td>'
								+ '<td>'
								+ '</td>'
								+ '<td>'
								+ h.find("#contactsName").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#contactsPhone").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#contactsEmail").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#contactsRemarks").val()
								+ '</td>'
								+ '<td><a href="javascript:" onclick="update(this)"><i class="icon-edit"></i></a>&nbsp;'
								+ '<a href="javascript:" class="deleteRow"><i class="icon-remove"></i></a></td>'
								+ '</tr>';
						$("#tbody").append(newRow);
						return true;
					}
					return false;
				}
			};
			$.jBox.open(states, '新增联系人', 500);
		}

		//编辑联系人
		function update(obj) {
			var html = '<div style="margin-top: 10px;">'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人编号：</label>'
					+ '<input type="text" id="contactsCodeNum" readonly="true"'
					+ $(obj).parent().parent().children("td:eq(1)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人：</label>'
					+ '<input type="text" id="contactsName" placeholder="必填" value="'
					+ $(obj).parent().parent().children("td:eq(2)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">电话：</label>'
					+ '<input type="text" id="contactsPhone"  value="'
					+ $(obj).parent().parent().children("td:eq(3)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">邮箱：</label>'
					+ '<input type="text" id="contactsEmail" value="'
					+ $(obj).parent().parent().children("td:eq(4)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">备注：</label>'
					+ '<textarea rows="2" cols="30" id="contactsRemarks">'
					+ $(obj).parent().parent().children("td:eq(5)").html()
					+ '</textarea></div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'选择' : true,
					'关闭' : false
				},
				submit : function(v, h, f) {
					if (v == false) {
						return true;
					} else {
						//判断是否选择了合同，然后赋值给文本框
						if (h.find("#contactsName").val() == '') {
							$.jBox.tip("请输入联系人姓名", "warn");
							return false;
						}
						//获取值添加到表格中
						$(obj).parent().parent().children("td:eq(1)").html(
								h.find("#contactsCodeNum").val());
						$(obj).parent().parent().children("td:eq(2)").html(
								h.find("#contactsName").val());
						$(obj).parent().parent().children("td:eq(3)").html(
								h.find("#contactsPhone").val());
						$(obj).parent().parent().children("td:eq(4)").html(
								h.find("#contactsEmail").val());
						$(obj).parent().parent().children("td:eq(5)").html(
								h.find("#contactsRemarks").val());
						return true;
					}
					return false;
				}
			};
			$.jBox.open(states, '编辑联系人', 500);
		}

		var dIds = new Array();//删除了的供应商联系人ID数组
		var i = 0;//数组下标
		//删除
		$(".deleteRow").live("click",function() {
			var obj = $(this);
			var submit = function (v, h, f) {
				if (v == 'ok'){ 
					dIds[i] = $(this).parent().parent().children("td:eq(0)")
							.children("input:eq(0)").val();
					i++;
					$(obj).parent().parent().remove();
				}else if (v == 'cancel'){
					return true;
				}
			};
			$.jBox.confirm("确认删除此信息吗？", "提示", submit); 
	});

		//保存
		function save() {
			var json = "";
			//获取供应商的参数
			var supplierId = $("#supplierId").val();//供应商ID
			var supplierType = $("#supplierTypeCodeNum").val();//供应商类型编号
			var name = $("#name").val();
			var phone = $("#phone").val();
			var fax = $("#fax").val();
			var email = $("#email").val();
			var address = $("#address").val();
			var website = $("#website").val();
			var supplierRemarks = $("#supplierRemarks").val();
			//正则表达式
			/* var emailReg = new RegExp(
					"^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");
			var phoneReg = new RegExp("^[0-9]*$"); */
			if (name != '') {
			if (supplierType != '') {
				//迭代出 供应商联系人
				$.each($("#tbody tr"),
						function(i, info) {
							var contactsId = $(
									"#tbody tr:eq(" + i + ") td input:eq(0)")
									.val();
							var contactsCodeNum = $(
									"#tbody tr:eq(" + i + ") td input:eq(1)")
									.val();
							var contactsName = $(
									"#tbody tr:eq(" + i + ") td:eq(2)").html();
							var contactsPhone = $(
									"#tbody tr:eq(" + i + ") td:eq(3)").html();
							var contactsEmail = $(
									"#tbody tr:eq(" + i + ") td:eq(4)").html();
							var contactsRemarks = $(
									"#tbody tr:eq(" + i + ") td:eq(5)").html();
							if (i != 0) {
								json = json + ','
							}
							json = json + '{"id":"' + contactsId + '","codeNum":"'
							+ contactsCodeNum + '","name":"'
									+ contactsName + '","phone":"'
									+ contactsPhone + '","email":"'
									+ contactsEmail + '","remarks":"'
									+ contactsRemarks + '"}';
						});
				var contacts = '[' + json + ']';
				var supplier = '{"id":"' + supplierId + '","supplierType":"'
						+ supplierType + '","name":"' + name + '","phone":"'
						+ phone + '","fax":"' + fax + 
						'","email":"' + email
						+ '","address":"' + address + '","website":"' + website
						+ '","remarks":"' + supplierRemarks + '"}';
				
				$("input[name=supplier]").val(supplier);
				$("input[name=contacts]").val(contacts);
				$("input[name=ids]").val(dIds);
				//删除不存在的文件
				$.each($("input[name=fileName]"), function(i,info){
					if($(info).val() == null || $(info).val() == ''){
						$(info).parent().parent().remove();
					}
				});
				if(checkfile()){
					$("#uploadForm").submit();//提交表单
				}
			} else {
				jBox.tip("请添加供应商类型！");
			}
			}
			else {
				jBox.tip("请输入供应商名称！");
			}
		}
		
		//验证文件大小 不可超过10M
		function checkfile(){
			var files = document.getElementsByName("fileName");
			var maxsize = 10*1024*1024;//10M  
			var errMsg = "上传的附件文件不能超过10M！！！";  
			for (var i = 0 ; i < files.length ; i++){
				if(files[i].files[0].size > maxsize){
					jBox.tip(errMsg);
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>